<template>
  <div id="faultChart"></div>
</template>

<script>
import * as echarts from "echarts";
export default {
  name: "faultChart",
  props: {
    currentMonthData: {
      type: Array,
      default: [],
    },
    monthCountData: {
      type: Array,
      default: [],
    },
  },
  data() {
    return {
      chartDom: null,
      myChart: null,
      option: null,
    };
  },
  methods: {
    async getData() {
      // this.option = {
      //   xAxis: {
      //     type: "category",
      //     name: "月份",
      //     nameTextStyle: {
      //       color: "#fff",
      //     },
      //     axisLabel: { show: true, color: "#fff", rotate: 0 }, //显示轴的数值
      //     boundaryGap: false,
      //     // data: [1,2,3,4,5,6,7,8,9,10,11,12],
      //     data: this.currentMonthData,
      //   },
      //   yAxis: {
      //     type: "value",
      //     name: "产量",
      //     nameTextStyle: {
      //       color: "#fff",
      //       padding: [0, 0, 0, -25],
      //     },
      //     splitLine: { show: false }, //显示背景线轴
      //     axisLine: { show: false }, //显示轴
      //     axisLabel: { show: true, color: "#fff" }, //显示轴的数值
      //     axisTick: { show: false }, //轴刻度线
      //   },
      //   series: [
      //     {
      //       smooth: true,
      //       data: this.monthCountData,
      //       type: "line",
      //     },
      //   ],
      // };
      this.option = {
        xAxis: {
          type: "category",
          name: "月份",
          nameTextStyle: {
            color: "#fff",
          },
          axisLabel: {
            show: true,
            color: "#fff",
            rotate: 0,
          },
          boundaryGap: false,
          data: this.currentMonthData,
        },
        yAxis: {
          type: "value",
          name: "产量",
          nameTextStyle: {
            color: "#fff",
            padding: [0, 0, 0, -25],
          },
          splitLine: { show: false },
          axisLine: { show: false },
          axisLabel: {
            show: true,
            color: "#fff",
          },
          axisTick: { show: false },
        },
        series: [
          {
            smooth: true,
            data: this.monthCountData,
            type: "line",
          },
        ],
      };
    },
    async initChart() {
      // this.chartDom = document.getElementById("faultChart");
      // this.myChart = echarts.init(this.chartDom);
      // this.myChart.setOption(this.option);
      let chart = echarts.init(document.getElementById("faultChart"))
      chart.setOption(this.option)
    },
  },
  async mounted() {
    const that = this;
    await this.getData();
    await this.initChart();
    // window.addEventListener("resize", function () {
    //   echarts.init(document.getElementById("faultChart")).resize();
    // });
  },
};
</script>

<style scoped>
#faultChart {
  width: 100%;
  height: 100%;
}
</style>
